<template>
  <div class="g-idWrap">
      <div class="m-id" @click="addIdImage">
        <!-- <vue-qr :text="form.qrcode_text" :margin="0" colorDark="#000" colorLight="#fff" :logoSrc="icon"  :size="80" class="qr"></vue-qr> -->
        <!-- <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3488974828,4100117410&fm=11&gp=0.jpg" class="qr"> -->
        <vue-qr :text="form.qrcode_text" :margin="0" colorDark="#000" colorLight="#fff" :logoSrc="icon"  :size="180"  class="qr"></vue-qr>
        <p style="text-align:center;">就诊时出示此二维码</p>
      </div>
      
      <ul class="list-group">
        <li class="list-group-item">
            <span class="u-label">姓名</span>
            <span class="u-val">{{form.name}}</span>
        </li>
        <li class="list-group-item">
            <span class="u-label">身份证号</span>
            <span class="u-val">{{form.id_no.replace(/^(.{4})(?:\d+)(.{4})$/,"$1**********$2")}}</span>
            <!-- <span class="u-val">{{form.id_no}}</span> -->
        </li>
        <li class="list-group-item">
            <span class="u-label">登记号</span>
            <span class="u-val">{{form.pat_id}}</span>
        </li>
        <li class="list-group-item">
            <span class="u-label">手机号</span>
            <span class="u-val">{{form.mobile.replace(/^(.{2})(?:\d+)(.{2})$/,"$1*******$2")}}</span>
            <!-- <span class="u-val">{{form.phone1}}</span> -->
        </li>
    </ul>  
    <button type="button" class="btn btn-primary" @click="joinPackage">加入卡包</button>
    <button data-v-0aa81ccc="" type="button" class="btn" style="margin-top: 10px;" @click="unbundCard">解绑</button>
    <!--
    <div class="show-more">
        <a @click="unbundCard">解绑电子健康卡</a>
    </div>-->
  </div>
</template>
<script>
import vueQr from 'vue-qr'
export default {
    components: {
      vueQr
    },
    data(){
        return {
            icon:require("../assets/logo_.png"),
            orderId:'',
            jumpUrl:'https://health.tengmed.com/open/takeMsCard?',
            form:{
                name:'',
                id_no:'',
                pat_id:'',
                treatmentCard:'',
                health_card_id:'',
                mobile:'',
                qrcode_text:''
            }
        }
    },
    created(){
        var fromData = this.$route.query.cardDate
        // this.form = JSON.stringify(fromData)
        this.form = fromData
        console.error("fd:",this.form)
        this.form.id_no = fromData.id_no.toString()
        this.form.mobile = fromData.mobile.toString()
        // console.log("id_no:",this.form.id_no)
    },
    mounted() {
        
    },
    methods:{
        addIdImage: function () {
           
           
        },
        joinPackage() {
            let param = this.form.qrcode_text
            alert(param)
            this.$api.getOrderId(param).then(res=>{
                
                if(res.data.commonOut.resultCode === 0) {
                    this.orderId = res.data.rsp.orderId
                    window.location.href = this.jumpUrl + 'order_id=' + this.orderId + 'redirect_uri=' + encodeURIComponent(location.href)
                }else{
                    alert(res.data.commonOut.errMsg)
                }
            })
        },
        unbundCard() {
            let health_card_id = this.form.health_card_id
            this.$api.unbundCard(health_card_id).then(res=> {
                if(res.data == 'success') {
                     alert('解除绑定成功')
                     this.$router.push({name:'mycard'})
                }else{
                    alert('解除绑定失败')
                }
            })
           
        }
    }
}
</script>
<style scoped>
.g-idWrap{
    padding: 10px;
    box-sizing: border-box;
    height: 100%;
    background-color: #f4f4f4;
}
.list-group{
    border-radius: 6px;
}
.list-group .list-group-item{
    border-style:none none solid none;
    margin-bottom: 0;
    border-radius: 0;
    display: flex;
    justify-content: space-between;
}
.list-group >>> .u-label{
    flex-shrink: 0;
    padding-right: 10px;
    font-weight: 700;
}
.list-group >>> .u-val{
    word-break: break-word;
}
.m-id{
    position: relative;
    background-color: #fff;
    overflow: hidden;
}
.m-id >>> .qr{
    display: block!important;
    margin: 10px auto;
    height: auto;
}
.j-upd{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 20px;
    padding-top: 60px;
    color: #fff;
    white-space: nowrap;
    background:url('') center 10px no-repeat;
    background-size: 40px 40px;
}
.m-demand dt{
    padding:10px 0;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
}
.m-demand dd{
    padding: 8px 0 0 0;
}
.btn{
    display: block;
    width: 100%;
    margin-top: 10px;
}
.show-more{
      width: 200px;
      height: 30px;
      border-radius: 20px;
      text-align: center;
      display:table;
    }
.show-more a{
    display:table-cell; 
    vertical-align:middle;
}
</style>